{{extends file="backend/layout.tpl"}} {{block name=title}}博客后台首页{{/block}}
{{block name=header}}
<style>
  .dash {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
</style>
{{/block}} {{block name=content}}
<body class="layui-layout-body">
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">博客后台</div>
      <!-- 头部区域（可配合layui已有的水平导航） -->
      <ul id="headerNav" class="layui-nav layui-layout-left">
        <li class="layui-nav-item layui-this">
          <a href="admin/dash">控制台</a>
        </li>
        <li class="layui-nav-item"><a href="">用户</a></li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;">
            <img src="http://t.cn/RCzsdCq" class="layui-nav-img" />
            徐乾坤
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">基本资料</a></dd>
          </dl>
        </li>
        <li id="loginOut" class="layui-nav-item"><a href="">退出登录</a></li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="javascript:;">所有商品</a>
            <dl class="layui-nav-child side-menu">
              <dd><a href="admin/sys">列表一</a></dd>
              <dd><a href="">列表二</a></dd>
              <dd><a href="javascript:;">列表三</a></dd>
              <dd><a href="">超链接</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child side-menu">
              <dd><a href="javascript:;">列表一</a></dd>
              <dd><a href="javascript:;">列表二</a></dd>
              <dd><a href="">超链接</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">云市场</a></li>
          <li class="layui-nav-item"><a href="">发布商品</a></li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div id="content-container" style="padding: 15px; height: 100%"></div>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      © easy.mvc.com - xujack
    </div>
  </div>
  {{/block}} {{block name=script}}
  <script>
    // 使用前端路由动态加载内容
    layui.use("element", function () {
      var element = layui.element;
      var $ = layui.$;

      var url = "admin/dash";

      // AJAX加载内容
      $("#content-container").load(url, function () {
        element.render("tab"); // 重新渲染
      });

      $("#headerNav").on("click", "a", function (e) {
        e.preventDefault();
        $(".layui-side .layui-this").removeClass("layui-this");
        var url = $(this).attr("href");

        // AJAX加载内容
        $("#content-container").load(url, function () {
          element.render("tab"); // 重新渲染
        });
      });

      // 监听左侧菜单点击
      $(".layui-side").on("click", "a", function (e) {
        e.preventDefault();
        $("#headerNav .layui-this").removeClass("layui-this");

        var url = $(this).attr("href");
        var title = $(this).text();

        if (url === "") return;
        if (url === "javascript:;") return;

        // AJAX加载内容
        $("#content-container").load(url, function () {
          element.render("tab"); // 重新渲染
        });
      });

      $("#loginOut").click(function (e) {
        e.preventDefault();
        $.get(
          "admin/logout",
          {},
          function (data, textStatus, jqXHR) {
            if (data.code == 1) {
              window.location.href = data.data;
            }
          },
          "json"
        );
      });
    });
  </script>
  {{/block}}

